<template>
  <section class="index flex">
    <section class="menu border">
      <div class="text-center">
        <button
          type="button"
          @click="openModal"
          class="inline-flex items-center rounded-md bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
        >
          <PlusIcon class="-ml-0.5 mr-1.5 h-5 w-5" aria-hidden="true" />
          新建目录
        </button>
      </div>
      <!-- <div v-for="(item, index) in data" class="title">
        <div class="title_label" @click="handleToggleMenu(index)">
          <span>{{ item.label }} </span
          ><img
            class="title_img"
            :class="{ active: openMenuList.includes(index) }"
            src="../assets/imgs/down.png"
          />
        </div>
        <section class="content" v-if="openMenuList.includes(index)">
          <div v-for="child in item.children" class="child">
            <div class="child_label" @click="handleClick(child)">{{ child.label }}</div>
          </div>
        </section>
      </div> -->

      <div class="titile" v-for="item in arr" @click="handleClickToMessage(item)">
      <span>{{ item.username }}</span>
      </div>
    </section>

    <section class="markdown">
      <AiEditor :content="text" />
    </section>

    <Modal :isOpen="isModalOpen" @close="closeModal" @confirm="handleConfirm" />
    <section class="function border">3</section>
  </section>
</template>

<script setup lang="ts">
import { PlusIcon } from "@heroicons/vue/20/solid";
import Modal from "~/components/ModalItem.vue";
import { users  } from '~/api/users';
import { save, messages, list } from '~/api/messages';
import * as mock from "./mock";
const data = ref(mock.data); //  menu 数据

const openMenuList = ref(<number[]>[0]);
const handleToggleMenu = (index: number) => {
  // 检查 index 是否已经存在于 openMenuList 中
  const indexExists = openMenuList.value.includes(index);
  if (indexExists) {
    // 如果存在，则移除它
    openMenuList.value = openMenuList.value.filter((item) => item !== index);
  } else {
    // 如果不存在，则添加它
    openMenuList.value.push(index);
  }
};
const arr:any = ref([])
const handleClickToMessage = (item:any) => {
  openModal()
  console.log(item)
}
onMounted(() => {
  // users().then((res) => {
  //   console.log(res.data.data);
  //   arr.value = res.data.data
  // });
  let params = {
    senderId: "66f4fbfb69e92fa31864128a", // 当前用户
    receiverId: "66f4d9fbfa2346102a3c6ec4", // 当前用户
  }
  messages(params).then((res) => {
    console.log('messages',res.data.data)
  })
  // let param = {
  //   senderId:"66f4fbfb69e92fa31864128a", // 当前用户
  // }
  // list(param).then((res) => {
  //   console.log("list",res.data)
  // })
})
interface IItem {
  label: string;
  value: string;
}
const text = ref("hello world"); //  markdown 数据
const handleClick = (item: IItem) => {
  text.value = item.value;
};

const isModalOpen = ref(false);

const openModal = () => {
  isModalOpen.value = true;
};

const closeModal = () => {
  isModalOpen.value = false;
};
const handleConfirm = (value: string) => {
  console.log("Confirmed value:", value);
  let params = {
    senderId: '66f4fbfb69e92fa31864128a',
    receiverId: "66f3c4bc39135b88685c2701",
    content: value,
  }
  save(params).then((res) => {
    console.log(res)
  })
  closeModal();
};
</script>

<style scoped lang="stylus">
.title
  &_label
    background-color #888
    display flex
    justify-content space-between
    padding 0 20px
    cursor pointer
  &_img
    width 20px
    height 20px
    margin-top 10px
    transform rotate(180deg)
    &:active
      transform rotate(0deg)
.active
  transform rotate(0deg)
.child
  &_label
    padding 0 20px
.child_label:hover
  background-color #fff
  cursor pointer
  color lightGreen
  animation: all 0.3s ease-in-out;
.index {
  padding: 80px 0
  width 100%
}
.menu
  width 250px
  line-height 40px

.markdown
  margin 0 40px
  width 800px

.function {
  width 500px
}
.border
  border 1px solid #ccc
  border-radius 10px
</style>
